<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>AI训练 - 创建训练</title>
  <link rel="stylesheet" href="css/iview.css">
  <link rel="stylesheet" href="css/global.css">
  <script src="js/vue.min.js"></script>
  <style>
    [v-cloak] {
      display: none;
    }

    .h-tit {
      padding: 30px 0 30px 0;
      font-size: 16px;
      font-family: MicrosoftYaHei;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }

    .data-m {
      padding: 0 30px;
    }

    .h-li li:last-child {
      padding-bottom: 30px;
    }

    .h-li li:not(.h-tit) {
      margin-bottom: 5px;
    }

    .buyhash {
      margin: 20px 0;
      height: 453px;
      position: relative;
      user-select: none;
    }

    .buyhash-span {
      width: 200px;
      height: 15px;
      font-size: 16px;
      font-family: MicrosoftYaHei;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      position: absolute;
      top: 30px;
    }

    .buyhash-span2 {
      width: 200px;
      height: 15px;
      font-size: 16px;
      font-family: MicrosoftYaHei;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      position: absolute;
      top: 90px;
    }

    .ivu-radio-inner {
      display: inline-block;
      width: 18px;
      height: 18px;
      position: relative;
      top: 0;
      left: 0;
      background-color: #dcdee2;
      border-radius: 50%;
      -webkit-transition: all .2s ease-in-out;
      transition: all .2s ease-in-out;
    }

    .buyhash-ul {
      position: absolute;
      top: 45px;
      font-size: 14px;
      font-family: MicrosoftYaHei;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);

    }

    .ivu-slider-wrap {
      width: 506px;
      height: 26px;
      margin: 16px 5px;
      /* background: rgba(238, 238, 238, 1);
       */
      background: transparent;
      border-radius: 13px;
      vertical-align: middle;
      position: relative;
      cursor: pointer;
    }

    .xs-x {
      position: relative;
    }

    .buyhash-zy .ivu-slider-bar {
      background: #2d8cf0;
    }

    .xs-y .ivu-slider-wrap {
      width: 506px;
      height: 26px;
      margin: 16px 5px;
      background: #dcdee2;
      /* background: transparent; */
      border-radius: 13px;
      vertical-align: middle;
      position: relative;
      cursor: pointer;
    }

    .ivu-slider-bar {
      width: 309px;
      height: 26px;
      background: transparent !important;
      border-radius: 13px;
      position: absolute;
      z-index: 2;
      border-top-left-radius: 13px;
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
      border-bottom-left-radius: 13px;
    }

    .ivu-slider-button {
      background: url("images/yu.png");
      height: 41px;
      width: 47px;
      border: none;
      border-radius: 50%;
      transition: all .2s linear;
      outline: 0;
      position: absolute;
      top: -14px;
      left: -22px;
    }

    .ivu-slider-button:hover {
      border-color: #2d8cf0;
      -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
      transform: scale(1.1);
    }

    .buyhash-zy {
      display: flex;
    }

    .buyhash-zy li:first-child {
      -moz-flex: 1;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
      margin-right: 20px;
    }

    .buyhash-zy li:last-child {
      width: 500px;
      line-height: 60px;
      margin-left: 20px;
    }

    .buyhash-zy span {
      margin-right: 3px;
    }

    .buyhash-zy li {
      height: 50px;
    }

    .byhash-ys {
      position: absolute;
      top: 123px;
    }

    .ivu-radio-inner::after {
      position: absolute;
      width: 16px;
      height: 16px;
      left: 0px;
      top: 0px;
      border-radius: 9px;
      display: table;
      border-top: 0;
      border-left: 0;
      content: ' ';
      background-color: rgba(14, 156, 242, 1);
      opacity: 0;
      -webkit-transition: all .2s ease-in-out;
      transition: all .2s ease-in-out;
      -webkit-transform: scale(0);
      -ms-transform: scale(0);
      transform: scale(0);
    }

    .radio {
      margin-right: 45px;
    }

    .counthash {
      position: absolute;
      top: 200px;
      border-top: 1px solid rgba(242, 242, 242, 1);
      width: 1300px;
      padding-top: 30px;
    }

    .counthash li:last-child {
      width: 100px;
      height: 40px;
      background: linear-gradient(0deg, rgba(32, 171, 255, 1), rgba(14, 156, 242, 1));
      border-radius: 3px;
      color: white;
      font-size: 14px;
      font-family: MicrosoftYaHei;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 40px;
      text-align: center;
      cursor: pointer;
      position: absolute;
      top: 100px;
    }

    .counthash a {
      color: white;
      cursor: pointer;
    }

    .counthash li {
      height: 30px;
    }

    .j-yong {
      pointer-events: none;
    }

    .by-li {
      margin-bottom: 6px;
    }

    #progress-outer {
      background-color: #8DD4FF;
      width: 98%;
      left: 1%;
      height: 25px;
      position: absolute;
      top: 17px;
      border-radius: 13px
    }

    #progress-bar {
      background-color: #0E9CF2;
      height: 25px;
      border-radius: 13px
    }
    .xs-y .ivu-slider-button {
        background: url("images/qradio.png");
        height: 41px;
        width: 47px;
        border: none;
        transition: all .2s linear;
        outline: 0;
        position: absolute;
        top: -14px;
        left: -20px;
    }
    .radios .ivu-radio-inner {
    display: inline-block;
    width: 18px;
    height: 18px;
    position: relative;
    top: 0;
    left: 0;
    background-color: #8DD4FF;
    border-radius: 50%;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    }
    .ivu-slider-button-wrap {
      position: relative;
      z-index: 1001;
    }
  </style>
</head>

<body>
  <div class="wrapper center" id="app" v-cloak file-name="ai_create">
    <div class="main">
      <section class="panel data-m">
        <ul class="h-li">
          <li class="h-tit">温馨提示</li>
          <li>1.创建规则：选择您需要使用的算力和训练时长，系统会根据您的选择调用GPU集群，并为您匹配最优质的集群，选择闲置资源不会加入队列。</li>
          <li>2.扣费规则：创建训练不会收取任何费用，系统会根据您的使用情况进行实时扣费。</li>
          <li>3.注意事项：系统会在算力耗尽时中断您的训练，为避免不必要的损失，请确保您账户有足够的算力。</li>
        </ul>
      </section>
      <section class="panel data-m">
        <div class="buyhash">
          <div class="buyhash-span">
            <span>请选择您要购买的算力：</span>
            <ul class="buyhash-ul">
              <li class="by-li">
                <radio-group v-model="animal" class="j-yong">
                  <radio label="闲置资源" class="radio"></radio>
                  <radio label="非闲置资源" class="radios"></radio>
                </radio-group>
              </li>
              <li>
                <ul class="buyhash-zy">
                  <!-- <li class="xs-x">
                    <slider v-model="value" :min='G.roundFixed(8.1*100/gpuMax)' :data-width="leaveWidth"></slider>
                  </li> -->

                  <li class="xs-x">
                    <div id="progress-outer">
                      <div id="progress-bar" :style="'width:' + leaveWidth + '%'"></div>
                    </div>
                    <slider v-model="value" step="27.5" :min="27.5" :max="85" show-stops></slider>
                  </li>
                  <li v-model="value">{{value}} TFLOPS（≈ {{gpuValue}} 张1080TI训练1小时）</li>
                </ul>
              </li>
              <li class="buyhash-span2">请选择您需要训练的时长：</li>
              <li>
                <ul class="buyhash-zy byhash-ys">
                  <li class="xs-y">
                    <slider v-model="value1" :min='1' :max='24'></slider>
                  </li>
                  <li>{{value1}} Hour</li>
                </ul>
              </li>
              <li>
                <ul class="counthash">
                  <li>预估算力: {{value}} TFLOPS（≈ {{gpuValue}} 张1080TI训练{{value1}}小时）</li>
                  <li>账户余额: {{G.toThousandsRound(initData.gpuBalance)}} TH</li>
                  <li><a href="javascript:;" @click="createTask">创建训练</a></li>
                </ul>
              </li>

            </ul>
          </div>
        </div>
      </section>
    </div>
  </div>
  <script src="js/iview.min.js"></script>
  <script src="js/axios.min.js"></script>
  <script src="js/global.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        animal: '闲置资源',
        value: 27.5,
        value1: 1,
        single: false,
        initData: {
          gpuBalance: 0,
        },
      },
      created() {
        this.requestData()
      },
      methods: {
        requestData() {
          axios.get('/user/querySomethingDatas')
            .then(res => {
              if (res.data.stateCode == 1) {
                this.initData = res.data.model;
              }
            })
            .catch(err => {
              console.log(err)
            });
        },
        createTask: G.debounce(function() {
          // if (this.thValue < 8.1) {
          //   return this.$Message.info('算力小于8.1，无法分配GPU')
          // }
          axios.post('/user/createTask', G.paramsSerializer({
            'hourTh': this.value,
            'taskHours': this.value1
          }))
            .then(res => {
              if (res.data.stateCode == 1) {
                G.to('ai_detailed&' + res.data.model)
              } else {
                this.$Message.error(res.data.msg)
              }
            })
            .catch(err => {
              this.$Message.error('创建任务失败')
              console.log(err)
            });
        }, G.DEBOUNCE_DELAY || 200),

      },
      computed: {
        gpuValue() {
          return G.roundFixed(this.value / 11.3)
        },
        thValue() {
          return G.roundFixed(this.value * this.gpuMax / 100)
        },
        gpuMax() {
          return G.roundFixed(this.initData.gpuAMax * 8.1 + this.initData.gpuBMax * 11.3)
        },
        gpuNum() {
          return G.roundFixed(this.initData.gpuANum * 8.1 + this.initData.gpuBNum * 11.3)
        },
        leaveWidth() {
          return G.roundFixed(this.gpuNum * 100 / 55)
        },
      },
    })
  </script>
</body>

</html>